<template>
  <div>
    <el-card class="box-card">
      <div class="BigDiv">
        <el-input class="ElInput" v-model="menuquery.menuName"></el-input>
        <el-button icon="el-icon-search" type="primary" @click="getMenuquery"></el-button>
        <el-button type="primary" style="margin-left: 50px" @click="add">添加菜单</el-button>
        <!--表格-->
        <el-table
            :data="tableData"
            style="width: 100%;margin-bottom: 20px;"
            row-key="id"
            border
            default-expand-all
            :tree-props="{children: 'childs', hasChildren: 'hasChildren'}">
          <el-table-column
              prop="id"
              label="id"
              width="130">
          </el-table-column>
          <el-table-column
              prop="menuName"
              label="菜单名称"
              width="130">
          </el-table-column>
          <el-table-column
              prop="menuIcon"
              label="图标"
              width="100">
            <template slot-scope='scope'>
              <i :class="scope.row.menuIcon"></i>
            </template>
          </el-table-column>
          <el-table-column
              prop="menuPath"
              label="菜单路径">
          </el-table-column>
          <el-table-column label="操作" width="300">
            <template slot-scope="scope">
              <el-button type="success" @click="updateMenu(scope.row)">编辑</el-button>
              <el-button type="danger" @click="deleteMenu(scope.row)">删除</el-button>
            </template>
          </el-table-column>

        </el-table>
        <!--表格-->
      </div>
    </el-card>
    <!--分页-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
    <!--分页-->

    <div class="ccc">
      <el-dialog title="添加菜单" :visible.sync="dialogFormVisible">
        <el-form :model="form" ref="form">
          <el-form-item label="菜单名称" :label-width="formLabelWidth">
            <p @click="openParentWindow" class="ParentCss" v-if="ParentNam !== ''" v-model="ParentNam">{{ParentNam}}</p>
            <p @click="openParentWindow" class="ParentCss" v-if="form.parentId === ''" v-model="form.parentId">点击选择父级</p>
          </el-form-item>
          <el-form-item label="菜单名称" :label-width="formLabelWidth">
            <el-input v-model="form.menuName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="图标" :label-width="formLabelWidth">
            <e-icon-picker v-model="form.menuIcon"></e-icon-picker>
          </el-form-item>
          <el-form-item label="路径" :label-width="formLabelWidth">
            <el-input v-model="form.menuPath" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="Add">确定</el-button>
            <el-button @click="dialogFormVisible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>

    <div class="aaa">
      <el-dialog title="父级菜单" :visible.sync="dialogFormVisibleaic">
        <el-table
            :data="tableData"
            style="width: 100%;margin-bottom: 20px;"
            row-key="id"
            border
            default-expand-all
            :tree-props="{children: 'childs', hasChildren: 'hasChildren'}">
          <el-table-column
              prop="id"
              label="id"
              width="130">
          </el-table-column>
          <el-table-column
              label="菜单名称"
              width="130">
            <template slot-scope="scope">
              <el-button @click="checkParent(scope.row)">{{scope.row.menuName}}</el-button>
            </template>
          </el-table-column>
          <el-table-column
              prop="menuIcon"
              label="图标"
              width="100">
            <template slot-scope='scope'>
              <i :class="scope.row.menuIcon"></i>
            </template>
          </el-table-column>
          <el-table-column
              prop="menuPath"
              label="菜单路径">
          </el-table-column>

        </el-table>
      </el-dialog>
    </div>

    <div class="aaa">
      <el-dialog title="修改菜单信息" :visible.sync="dialogFormVisiblea">
        <el-form :model="form1" ref="form1">
          <el-form-item label="功能模块" :label-width="formLabelWidth">
            <el-input v-model="form1.menuName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="图标" :label-width="formLabelWidth">
            <e-icon-picker v-model="form1.menuIcon"></e-icon-picker>
          </el-form-item>
          <el-form-item label="地址" :label-width="formLabelWidth">
            <el-input v-model="form1.menuPath" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="update">确定</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>


    <div class="aaa">
      <el-dialog title="权限分配" :visible.sync="dialogFormVisibleai">

      </el-dialog>
    </div>


  </div>
</template>

<script>
export default {
  /*Data*/
  // created(){
  //   this.query()
  // },
  data() {
    return {
      ParentNam: '',
      formLabelWidth:'120px',
      defaultProps: {
        children: 'childs',
        label: 'menuName'
      },
      pageSize: 10,
      pageNum:1,
      menuName:'',
      total:0,
      //父级菜单
      dialogFormVisibleaic: false,
      //权限弹窗
      dialogFormVisibleai: false,
      //修改弹窗
      dialogFormVisiblea: false,
      //新增弹窗
      dialogFormVisible:false,

      form1:{
        menuName:'',
        menuIcon:'',
        menuPath:'',
        parentId:''
      },

      form:{
        menuName:'',
        menuIcon:'',
        menuPath:'',
        parentId:''
      },
      tableData: [],
      menuquery:{
        id:'',
        menuName:'',
        menuIcon:'',
        menuPath:'',
        parentId:''
      },
    }
  },
  /*自动挂载*/
  mounted() {
    this.getMenuTree()
    this.getMenuquery()
  },
  /*函数*/
  //全查
  methods:{
    checkParent(data){
      this.ParentNam = data.menuName
      this.form.parentId = data.id
      console.log(data)
      this.dialogFormVisibleaic = false
    },
    openParentWindow(){
      this.dialogFormVisibleaic = true
      // this.message('success','success')
    },
    /*分页*/
    handleSizeChange (val) {
      this.pageRquset.pageSize = val
      this.getMenuquery()
    },
    handleCurrentChange (val) {
      this.pageRquset.pageNum = val
      this.getMenuquery()
    },
//   ,{
//   params: {
//     menuName: this.menuName,
//         pageSize: this.pageSize,
//         pageNum: this.pageNum
//   }
// }
    getMenuquery () {
      this.$axios.get('/memberZj/Menu/getMenuTree').then(res => {
        this.tableData = res.data.obj
      }).catch(error => {
        console.log(error)
      })
    },

    //删除
    message (message, type) {
      this.$message({
        message: message,
        type: type
      })
    },
    deleteMenu (row) {

      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          } // 删除提示框
      ).then(() => {
        this.$axios.delete('/memberZj/Menu/deleteMenu?id='+ row.id)
            .then(res => {
              if (res.data.code== '200') {
                debugger
                this.message('删除成功', 'success')
                //  this.getAllDept()
                this.chaxun()
              } else {
                this.message('删除失败', 'warning')
              }
            })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    //修改
    updateMenu(row){
      this.dialogFormVisiblea = true
      this.form1=JSON.parse(JSON.stringify(row))
    },
    // 新增弹出框
    add(){
      this.dialogFormVisible = true
    },
    jurisdiction(){
      this.dialogFormVisibleai = true
    },

    //修改方法
      update(){
       this.$axios.put('/memberZj/Menu/updateMenu',this.form1)
        .then(res =>{
          if (res.data.flag){
            this.message('修改成功','success')
            this.dialogFormVisiblea=false
            this.form1={
              menuName:'',
              menuIcon:'',
              menuPath:'',
              parentId:'',
            }
            this.getMenuquery()
          }
        })
      },
    // 新增
      Add(){
      this.$axios.post('/memberZj/Menu/addPMenuTree',this.form)
          .then(res =>{
            if (res.data.flag){
              alert("添加成功")
              this.insertLog('菜单')
              this.dialogFormVisible=false
              this.form={
                menuName:'',
                menuIcon:'',
                menuPath:'',
                parentId:'',
              }
              this.getMenuquery()
            }
          })
    },
    // 查询树
    getMenuTree () {
      // menu.pid =data.id
      this.$axios.get('/memberZj/Menu/getMenuTree')
          .then(res => {
            console.log(res)
            if (res.data.obj) {
              console.log(res)
              this.tableData = res.data.obj
            }
          }).catch(() => {
        this.$message.error('服务器崩溃了，请稍后再尝试使用！')
      })
    },


  },
}
</script>

<style>
.ParentCss{
  color:skyblue;
}
*{
  margin: 0;
  padding: 0;
}
.ElInput{
  width: 200px;
}
.box-card{
  height: 820px;
  margin: 10px;
}
</style>
